<template>
  <div>
    <a-modal class="form1"
             v-model="dialogVisible"
             title="新增联系人"
             width="476px"
             :dialog-style="{ top: '15vh' }"
             ok-text="确认"
             cancel-text="取消"
             @ok="handleOk()"
             @cancel="cancelOK()">
      <a-form-model ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="姓名"
                               prop="postCode">
              <a-input v-model="form.postCode"
                       placeholder="请输入手机号"
                       style="width:320px" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="姓名"
                               prop="postCode">
              <a-select v-model="this.tenantId"
                        @change="onSerch()"
                        placeholder="管理员"
                        style="width:320px">
                <a-select-option v-for="item in cardTypeArr"
                                 :value="item.tenantId"
                                 :key="item.id">
                  {{item.tenantName}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="联系方式"
                               prop="postCode">
              <a-input v-model="form.postCode"
                       placeholder="请输入手机号"
                       style="width:320px" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="邮箱"
                               prop="postCode">
              <a-input v-model="form.postCode"
                       placeholder="请输入邮箱"
                       style="width:320px" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="邮箱"
                               prop="postCode">
              <a-cascader :options="CityArray"
                          :value="form.optionsA"
                          :load-data="loadData"
                          change-on-select
                          @change="onChangeAddress"
                          placeholder="请选择地址"
                          style="width:320px;" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="邮箱"
                               prop="postCode">
              <a-input v-model="form.detailAddr"
                       placeholder="请输入地址详情"
                       style="width:320px;" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="系统消息"
                               style=""
                               prop="receiveSysMsg">
              <a-radio-group v-model="form.receiveSysMsg"
                             @change="onChangeSex">
                <a-radio v-for="item in sexArr "
                         :key="item.id"
                         :value="item.type"> {{item.title}} </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <div>

        </div>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import '@/assets/css/form.less'
export default {
  name: 'UserEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 15 },
      clickStatus: true,
      formArr: '',
      //选中省市区
      selectAddressArr: [],
      //api地区数据
      apiData: {},
      //api默认选中地址
      apiAddress: {},
      //性别
      sexArr: [
        {
          title: '不接收',
          type: 'false',
        },
        {
          title: '接收',
          type: 'true',
        },
      ],
      form: {
        //省
        province: '',
        //省编码
        provinceCode: '',
        //市
        city: '',
        //市编码
        cityCode: '',
        //区
        district: '',
        //区编码
        districtCode: '',
        //街道
        street: '',
        //街道编码
        streetCode: '',
        //详细地址
        detailAddr: '',
        // 地址备注
        comment: '',
        //邮编
        postCode: '',
        //是否默认
        beenDefault: true,
        //选中后数组
        optionsA: [],
      },
      CityArray: [],
      rules: {
        optionsA: [{ required: true, message: '请选择地址' }],
        detailAddr: [{ required: true, message: '请输入详细地址' }],
      },
      dialogVisible: false
    }
  },
  mounted () {
    console.log(123123)
  },
  created () {
  },
  methods: {

    //获取列表
    tenantAddress () {
      this.clickStatus = true
    },
    //修改编辑
    getList () {
      this.clickStatus = false
    },

    //确定新增
    handleOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('confirmAddress', JSON.parse(JSON.stringify(this.form)));
          this.concel()
        }
      })
    },
    //取消新增 如果form表单没值就是新建取消  有值是修改取消
    cancelOK () {
      this.$emit('cancel')
      this.concel()
    },

  },
  watch: {
    visible (newVal) {
      this.dialogVisible = newVal;
      if (newVal) {
        this.getCity();
      }
    }
  }
}
</script>
<style lang="less" scoped>
.foats {
  position: relative;
}
.beDefault {
  position: absolute;
  right: 260px;
  top: 10px;
}
.drawerForm {
  padding: 20px 20px 80px 30px;
  overflow: hidden;
}
/deep/ .ant-form-explain {
  position: absolute;
}
/deep/ .ant-form-item-label > label {
  color: @colorGreyFont;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
}
/deep/ .ant-form label {
  font-size: 12px;
  color: @colorGreyFont;
}
/deep/ .ant-input {
  color: @colorCommonFont;
}
/deep/ .ant-input::placeholder {
  color: #ccc;
}
/deep/ .ant-form-item {
  font-size: 12px;
  margin-bottom: 10px;
}
/deep/ .ant-modal-header {
  border-bottom: 1px solid @newBorder;
  padding: 16px 16px;
}
/deep/ .ant-input {
  font-size: 12px;
  border: 1px solid @newBorderS;
}
/deep/ .ant-select {
  font-size: 12px;
}
/deep/ .ant-select-selection {
  border: 1px solid @newBorderS;
}
</style>
